<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产:{{ house }}个</h4>
    <button @click="changeToy">把孩子1的玩具换掉</button>
    <button @click="changeComputer">把孩子2的电脑换掉</button>
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>
    <br />
    <child-1 ref="c1" />
    <child-2 ref="c2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
import { objectToString } from "@vue/shared";
let c1 = ref();
let c2 = ref();
//数据
let house = ref(4);
//方法
function changeToy() {
  console.log(c1.value);
  c1.value.toy = "五年高考 三年模拟";
}
function changeComputer() {
  c2.value.computer = "电脑城500块高端主机";
}
function getAllChild(refs: any) {
  for (let key in refs) {
    console.log(refs[key]);
    refs[key].book += 3;
  }
}
//向外部提供数据
defineExpose({ house });
</script>

<style scoped>
.father {
  background: rgb(179, 179, 179);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
</style>
